<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<span>邮箱: <input id="emails" type="text"></span></br><br>
<span>密码: <input id="passwords" type="text"></span><br><br>
<span>确认密码:<input id="newPassword" type="text"></span><br>
<span>验证码:<input id="codes" type="text"></span> <input id="getcodes" type="button" value="获取验证码"
                                                       onclick="settime(this)"> <br>
<input type="button" value="注册" id="logins"> <br><br>


</body>

<script type="text/javascript">
    // 绑定点击事件
    document.querySelector('#logins').onclick = function () {
        // 发送ajax 请求 需要 五步
        var emails = document.getElementById("emails").value;

        var password = document.getElementById("passwords").value;
        var newPassword = document.getElementById("newPassword").value;
        var codes = document.getElementById("codes").value;
        if (password != newPassword) {
            alert("密码不一样")
            return;
        }


        // （1）创建异步对象
        var ajaxObj = new XMLHttpRequest();

        // （2）设置请求的参数。包括：请求的方法、请求的url。

        var urls = "http://localhost:9002/api/user/register/" + emails + "/" + password + "/" + codes
        ajaxObj.open('get', urls);


        // （3）发送请求
        ajaxObj.send();

        //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
        //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
        ajaxObj.onreadystatechange = function () {
            // 为了保证 数据 完整返回，我们一般会判断 两个值
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
                console.log('数据返回成功');

                // 数据是保存在 异步对象的 属性中
                console.log(ajaxObj.responseText);
                if ("1" == ajaxObj.responseText) {


                    var allcookies = document.cookie;
                    var cookie_pos = allcookies.indexOf("token");
                    alert(cookie_pos);
                    alert(document.cookie.valueOf());
                    var token = document.cookie.match(new RegExp("(^| )" + token + "=([^;]*)(;|$)"));
                    if (null == token) {
                        alert("获取token失败")
                        return;
                    }
                    alert("获取token" + token)
                    var Days = 30; //此 cookie 将被保存 30 天
                    var exp = new Date();    //new Date("December 31, 9998");
                    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
                    document.cookie = token + "=" + escape(token) + ";expires=" + exp.toGMTString();
                    location.href = "/welcom.html";
                } else {
                    alert(ajaxObj.responseText);
                }
            }
        }
    }

    var countdown = 60;

    function settime(obj) {
        var emails = document.getElementById("emails").value;

        var password = document.getElementById("passwords").value;
        var newPassword = document.getElementById("newPassword").value;
        if (password != newPassword) {
            alert("密码不一样")
            return;
        }


        // （1）创建异步对象
        var ajaxObj = new XMLHttpRequest();

        // （2）设置请求的参数。包括：请求的方法、请求的url。

        var urls = "http://localhost:9002/api/code/validate" + emails;
        ajaxObj.open('get', urls);


        // （3）发送请求
        ajaxObj.send();

        //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
        //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
        ajaxObj.onreadystatechange = function () {
            // 为了保证 数据 完整返回，我们一般会判断 两个值
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
                console.log('数据返回成功');

                // 数据是保存在 异步对象的 属性中
                console.log(ajaxObj.responseText);
                if (true == ajaxObj.responseText) {
                    alert("验证码发送成功")
                } else {
                    alert(ajaxObj.responseText);
                }
            }
        }
        if (countdown == 0) {
            obj.removeAttribute("disabled");
            obj.value = "免费获取验证码";
            countdown = 60;
            return;
        } else {
            obj.setAttribute("disabled", true);
            obj.value = "重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function () {
                settime(obj)
            }
            , 1000)
    }


    /*document.querySelector('#getcodes').onclick = function () {
        // 发送ajax 请求 需要 五步
        var emails = document.getElementById("emails").value;
        if (countdown == 0) {
            obj.removeAttribute("disabled");
            obj.value = "免费获取验证码";
            countdown = 60;
            return;
        } else {
            obj.setAttribute("disabled", true);
            obj.value = "重新发送(" + countdown + ")";
            countdown--;
        }

        var password = document.getElementById("passwords").value;
        var newPassword = document.getElementById("newPassword").value;
        if (password != newPassword) {
            alert("密码不一样")
            return;
        }


        // （1）创建异步对象
        var ajaxObj = new XMLHttpRequest();

        // （2）设置请求的参数。包括：请求的方法、请求的url。

        var urls = "http://localhost:9002/api/code/validate" + email;
        ajaxObj.open('get', urls);


        // （3）发送请求
        ajaxObj.send();

        //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
        //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
        ajaxObj.onreadystatechange = function () {
            // 为了保证 数据 完整返回，我们一般会判断 两个值
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
                console.log('数据返回成功');

                // 数据是保存在 异步对象的 属性中
                console.log(ajaxObj.responseText);
                if (true == ajaxObj.responseText) {
                    alert("验证码发送成功")
                } else {
                    alert(ajaxObj.responseText);
                }
            }
        }
    }
*/
</script>

</html>